<template>
    <div
        id="property"
        class="chart"
    />
</template>
<script>
export default {
    props: {
        propertyData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        propertyData: {
            handler() {
                this.$nextTick(() => {
                    this.drawLine()
                })
            },
            deep: true
        }
    },
    mounted() {
        this.drawLine()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.changeSize, true)
    },
    methods: {

        drawLine() {
            if (this.myChart) {
                this.myChart.clear()
                this.$echarts.dispose(this.myChart)
            }
            let optionData = JSON.parse(JSON.stringify(this.propertyData))
            console.log(optionData)
            let option = {
                series: {
                    tooltip: {},
                    legend: {
                        show: false
                    },
                    left: "16",
                    right: 16,
                    top: 30,
                    bottom: 35,
                    roam: false, // 拖拽漫游（移动和缩放）
                    breadcrumb: false, // 面包屑
                    type: 'treemap',
                    label: {
                        show: true,
                        position: [6, 6],
                        formatter: function(params) {
                            let rate = (params.rate || params.rate == 0) ? params.rate : ''
                            return `{name|${params.name}}\n{value|${params.value}}\n{rate|${rate}}`
                        },
                        rich: {
                            name: {
                                fontSize: 12,
                                fontFamily: "Source Han Sans CN-Regular",
                                color: "#fff"
                            },
                            value: {
                                fontSize: 24,
                                fontFamily: "HarmonyOS Sans-Medium",
                                color: "#fff",
                                padding: [10, 0, 0, 0]
                            },
                            rate: {
                                fontSize: 24,
                                fontFamily: "HarmonyOS Sans-Medium",
                                color: "#fff",
                                padding: [10, 0, 0, 0]
                            }
                        }
                    },
                    data: [
                        {
                            name: '总人数',
                            value: optionData.total,
                            rate: '  '
                        },
                        {
                            name: '线索数',
                            rate: optionData.addUser_rate,
                            value: optionData.addUser
                        },
                        {
                            name: '公共线索',
                            rate: optionData.addGongUser_rate,
                            value: optionData.addGongUser
                        },
                        {
                            name: '无效线索',
                            rate: optionData.wuxiaoUser_rate,
                            value: optionData.wuxiaoUser
                        },
                        {
                            name: '客户',
                            rate: optionData.addKehu_rate,
                            value: optionData.addKehu
                        },
                        {
                            name: '成交客户',
                            rate: optionData.chengjiaoKehu_rate,
                            value: optionData.chengjiaoKehu
                        },
                        {
                            name: '体验客户',
                            rate: optionData.tiyanKehu_rate,
                            value: optionData.tiyanKehu
                        },
                        {
                            name: '新购',
                            rate: optionData.xingouKehu_rate,
                            value: optionData.xingouKehu
                        },
                        {
                            name: '增购',
                            rate: optionData.zenggouKehu_rate,
                            value: optionData.zenggouKehu
                        },
                        {
                            name: '复购',
                            rate: optionData.fugouKehu_rate,
                            value: optionData.fugouKehu
                        },
                        {
                            name: '预约',
                            rate: optionData.yuyueKehu_rate,
                            value: optionData.yuyueKehu
                        },
                        {
                            name: '上门',
                            rate: optionData.shangmenKehu_rate,
                            value: optionData.shangmenKehu
                        },
                        {
                            name: '未上门',
                            rate: optionData.weishangmenKehu_rate,
                            value: optionData.weishangmenKehu
                        },
                        {
                            name: '商机',
                            rate: optionData.shangjiKehu_rate,
                            value: optionData.shangjiKehu
                        }
                    ]
                },
                type: 'basicTreemap'
            };

            this.myChart = this.$echarts.init(document.getElementById('property'))
            // 绘制图表
            this.myChart.setOption(option)
            window.addEventListener('resize', this.changeSize, true)
        },
        changeSize() {
            this.myChart.resize()
        }
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>
